<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网址跳转工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-xl shadow-lg p-8 transform transition-custom hover:shadow-xl">
        <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">
            <i class="fa fa-link text-primary mr-2"></i>网址跳转
        </h1>
        
        <div class="space-y-4">
            <div>
                <label for="urlInput" class="block text-sm font-medium text-gray-700 mb-1">输入网址</label>
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                        <i class="fa fa-globe"></i>
                    </span>
                    <input 
                        type="text" 
                        id="urlInput" 
                        placeholder="例如: https://example.com" 
                        class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom outline-none"
                    >
                </div>
            </div>
            
            <button 
                id="redirectBtn" 
                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center gap-2 transform hover:scale-[1.02] active:scale-[0.98]"
            >
                <i class="fa fa-arrow-right"></i>
                <span>跳转到该网址</span>
            </button>
        </div>
        
        <p class="text-xs text-gray-500 mt-6 text-center">
            请确保输入完整的网址，包括 http:// 或 https://
        </p>
    </div>

    <script>
        // 获取元素
        const urlInput = document.getElementById('urlInput');
        const redirectBtn = document.getElementById('redirectBtn');
        
        // 跳转函数
        function redirectToUrl() {
            const url = urlInput.value.trim();
            
            if (!url) {
                alert('请输入网址');
                return;
            }
            
            // 简单验证URL格式，确保包含协议
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                // 如果用户忘记输入协议，默认添加https://
                urlInput.value = 'https://' + url;
            }
            
            try {
                // 尝试跳转到指定URL
                window.location.href = urlInput.value;
            } catch (error) {
                alert('无效的网址，请检查后重试');
                console.error('跳转错误:', error);
            }
        }
        
        // 绑定按钮点击事件
        redirectBtn.addEventListener('click', redirectToUrl);
        
        // 支持回车键触发跳转
        urlInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                redirectToUrl();
            }
        });
    </script>
</body>
</html>
